<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="mt-4">
    <el-alert
      title="
      注意：只允许为第三级分类设置相关参数!"
      type="warning"
      show-icon
      >
    </el-alert>
    <el-row class="my-4">
      <el-col>
        选择商品分类:
        <x-cascader :redact-or-add="false" @cascader-data="handleChange"></x-cascader>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 动态参数 -->
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" class="mb-3" :disabled="isBtnDisabled" @click="dialogData.dialogVisible = true">添加参数</el-button>
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            type="expand"
            width="50"
          >
            <template #default="scope">
              <el-tag
                :style="{margin: 10 + 'px'}"
                :key="i"
                v-for="(tag, i) in input_Vals[scope.row.attr_id]"
                closable
                :disable-transitions="false"
                @close="tagInputObj.handleClose(tag ,scope.$index, scope.row)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag align-baseline"
                :style="{width: 90 + 'px', marginLeft: 10 + 'px'}"
                v-if="inputStateArr[scope.$index].inputVisible"
                v-model="inputStateArr[scope.$index].inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter="tagInputObj.handleInputConfirm(scope.row, scope.$index)"
                @blur="tagInputObj.handleInputConfirm(scope.row, scope.$index)"
              >
              </el-input>
              <el-button
                v-else class="button-new-tag"
                size="small"
                @click="tagInputObj.showInput(scope.$index)"
                :style="{marginLeft: 10 + 'px',
                        height: 32 + 'px',
                        lineHeight: 30 + 'px',
                        paddingTop: 0,
                        paddingBottom: 0}"
                >
                + New Tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            width="50"
            type="index"
          >
          </el-table-column>
          <el-table-column
            label="参数名称"
            prop="attr_name"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template #default="scope">
              <el-button
                icon="el-icon-edit"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                icon="el-icon-danger"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 静态属性 -->
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" class="mb-3" :disabled="isBtnDisabled" @click="dialogData.dialogVisible = true">添加参数</el-button>
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            type="expand"
            width="50"
          >
            <template #default="scope">
              <el-tag
                :style="{margin: 10 + 'px'}"
                :key="i"
                v-for="(tag, i) in input_Vals[scope.row.attr_id]"
                closable
                :disable-transitions="false"
                @close="tagInputObj.handleClose(tag ,scope.$index, scope.row)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag align-baseline"
                :style="{width: 90 + 'px', marginLeft: 10 + 'px'}"
                v-if="inputStateArr[scope.$index].inputVisible"
                v-model="inputStateArr[scope.$index].inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter="tagInputObj.handleInputConfirm(scope.row, scope.$index)"
                @blur="tagInputObj.handleInputConfirm(scope.row, scope.$index)"
              >
              </el-input>
              <el-button
                v-else class="button-new-tag"
                size="small"
                @click="tagInputObj.showInput(scope.$index)"
                :style="{marginLeft: 10 + 'px',
                        height: 32 + 'px',
                        lineHeight: 30 + 'px',
                        paddingTop: 0,
                        paddingBottom: 0}"
                >
                + New Tag
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            width="50"
            type="index"
          >
          </el-table-column>
          <el-table-column
            label="参数名称"
            prop="attr_name"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template #default="scope">
              <el-button
                icon="el-icon-edit"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                icon="el-icon-danger"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
  <el-dialog
    :title="`添加${dialogData.dialogTitle}`"
    v-model="dialogData.dialogVisible"
    width="30%"
    :before-close="dialogData.handleDialogClose">
    <el-form :model="manyForm">
      <el-form-item label="参数名称">
        <el-input v-model="manyForm.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogData.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogData.handleDialogUpLoad">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    :title="`修改${dialogData.dialogTitle}`"
    v-model="compileDialogData.dialogVisible"
    width="30%"
    :before-close="compileDialogData.handleClose">
    <el-form :model="compileForm">
      <el-form-item label="参数名称">
        <el-input v-model="compileForm.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="compileDialogData.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="compileDialogData.dialogUpLoadClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import { useStore } from '@/store'
import { categoriesClickEvent, defaultParams, operationBtns, DialogStateFn, tableTagsInputEventsAndParamsAndObj } from './productParamsEventsAndParams'
import XCascader from '@/components/goods/privateComponents/XCascader.vue'

const contentList: contentType[] = ['首页', '商品管理', '参数列表']

export default defineComponent({
  name: 'ProductParams',
  components: {
    XBreadcrumb,
    XCascader
  },
  setup () {
    const store = useStore()

    const { activeName, tableData, inputStateArr, input_Vals, compileForm, manyForm, saveTagInput } = defaultParams

    // 初始化数据
    // const { options, props } = initStateFunc(store)

    onMounted(() => {
      store.dispatch('getCategoriesList')
    })

    const { handleChange, isBtnDisabled } = categoriesClickEvent(store)

    const { compileDialogData, dialogData } = DialogStateFn(store)

    const { handleEdit, handleDelete } = operationBtns(store, compileDialogData)

    const { tagInputObj, handleClick } = tableTagsInputEventsAndParamsAndObj(store, dialogData)

    return { handleChange, activeName, tableData, handleEdit, handleDelete, tagInputObj, saveTagInput, handleClick, isBtnDisabled, dialogData, manyForm, inputStateArr, input_Vals, compileDialogData, compileForm, contentList }
  }
})
</script>